<template>
  <FormItemWrapper :widget="widget" :designer="designer">
    <iframe src="http://localhost:3100/diyForm/input" height="100vh" width="100%" @load="setIframeHeight"></iframe>
  </FormItemWrapper>
</template>
<script lang="ts" name="test-iframe-widget" setup>
  import { ref, computed, onMounted, provide } from "vue"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { Icon } from "/@/components/Icon"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import FormItemWrapper from "./FormItemWrapper.vue"
  import type { Designer } from "../../type"
  import { useWidget } from "../useWidget"
  const props = defineProps({
    widget: { type: Object, default: {} },
    // componentProps: { type: Object, default: {}},
    designer: { type: Object as () => Designer },
    designerConfig: {
      type: Object,
      default: () => {
        return {
          formTemplates: true, //是否显示表单模板
        }
      },
    },
  })
  const widgetProps = props.widget.props
  const attrs = useAttrs()
  provide("designerConfig", props.designerConfig)
  const { watchDefaultValue } = useWidget()
  watchDefaultValue(props)

  const iframe = ref()
  const setIframeHeight = () => {
    setTimeout(() => {
      iframe.value.height = iframe.value?.contentWindow?.document?.documentElement?.offsetHeight || 0
    }, 150)
  }
</script>

<style lang="less"></style>
